<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform:translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div></div>
    <!-- 
        1.什么是函数节流[throttle] ?
        函数节流也是优化高频率执行js代码的一种手段，
        可以减少高频调用函数的执行次数。

        2.函数节流作用
        减少代码执行次数，提高网页性能

        3.函数节流应用场景
        oninput / onmousemove / onscroll / onresize等事件

        4.函数节流和函数防抖的区别
        函数节流是减少连续的高频操作执行次数（例如：连续调用十次，可能指执行3-4次）
        函数防抖是让连续的高频操作函数执行性一次（例如：连续调用十次，但是只会执行一次）
     -->
     <script src="js/tools.js"></script>
     <script>
        // 需求：让div的宽高永远是可视区域宽高的一半
        let oDiv = document.querySelector("div");
        function resetSize() {
            let {width, height} = getScreen();
            oDiv.style.width = width / 2 + 'px';
            oDiv.style.height = height / 2 + 'px';
        }
        resetSize();
        // // 使用函数节流，不能实施的看到长宽的变化
        // window.onresize = debounce(function(){
        //     resetSize()
        //     console.log("尺寸的变化");
        // })
      
        // 监听可视区域尺寸的变化
        window.onresize = throttle(function() {
            resetSize()
            console.log("尺寸变化");
        }, 500);
     </script>
</body>
</html>